<template>
  <div class="white-bg workbench">
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="(item, index) in data"
        :key="index"
        :label="item.text"
        :name="item.text"
      >
        <el-scrollbar class="workbenchContent">
          <el-row :gutter="10" style="margin: 0px">
            <el-col
              :span="6"
              style="margin-bottom: 20px;"
              v-for="(item2, index) in item.children"
              :key="index"
              :title="item2.text"
            >
              <div class="maskBox" style="">
                <el-image
                  @click="handleClick(item2)"
                  :src="item2.impage"
                  style="width: 100%;height: 100%"
                  class="imgCard"
                  fit="cover"
                />
                <div class="maskItem animate__animated animate__zoomIn " 
                @click="handleClick(item2)">
                {{ item2.text}}
                </div>
              </div>
            </el-col>
          </el-row>
        </el-scrollbar>
        <!-- <stepsCard /> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import { data } from "./components";
import stepsCard from "./stepsCard.vue";
const activeName = ref(data[0].text);
const dialogVisible = ref(true);
const state = reactive({});
const handleClick = (item: any) => {

   let data=  router.resolve({
    path:"/render/"+item.id,
  });
  window.open(data.href);
};
onMounted(() => {});
</script>

<style scoped lang="scss">
.workbench {
  height: 100%;
  padding: 10px;
  background-color: #fff;

  .workbenchContent {
    height: calc(100vh - 187px);
  }
  .imgCard {
    cursor: pointer;
  }
  .maskBox {
    position: relative;
    width: 100%;
    height: 300px;
    background: #042c67;
    cursor: pointer;
  }
  .maskItem {
    display: none;
    width: 100%;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 0;
     cursor: pointer;
     font-size: 30px;
     color: #fff;
     text-align: center;
     line-height: 300px;
  }
  .maskBox:hover {
    .maskItem {
      display: block;
      
    }
  }
}
</style>
